<template>
	<view class="flex-col page">
		<view class="flex-col section space-y-60">
			<view class="flex-row justify-center relative">
				<image class="image pos" @click="backpage"
					src="https://gongxiangtaiqiu.axa2.com/taiqiu/16777480137488403283.png" />
				<text class="text">监控</text>
			</view>

			<u-select v-model="show" :list="arealist"></u-select>

			<view class="flex-col group">
				<view class="flex-row justify-between items-center group_2">
					<text class="text_2">铁西沈辽路店</text>
					<view class="flex-row space-x-7">
						<text class="text_3" @click="show = true">切换门店</text>
						<image class="shrink-0 image_2"
							src="https://gongxiangtaiqiu.axa2.com/taiqiu/16777400650594751651.png" />
					</view>
				</view>
				<view class="manage">监控管理</view>
				<view class="box">
					<view class="item" v-for="item in 3">
						<view class="item-lf">
							<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/join.png"
								style="width: 100%; height: 100%;" />
						</view>
						<view class="item-rg">
							<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/join.png"
								style="width: 100%; height: 100%;" />
						</view>
					</view>
				</view>
				<view class="btn-box">
					<view class="btn-lf">
						<view class="btnlf-p">查看监控</view>
					</view>
					<view class="btn-rg">
						<view class="btnrg-p">远程对话</view>
					</view>
				</view>
				
			</view>
		</view>


	</view>

</template>

<script>
	export default {
		components: {},
		data() {
			return {
				show: false,
				arealist: [{
						value: '1',
						label: '铁西滑翔店'
					},
					{
						value: '2',
						label: '华强广场店铺'
					}
				],
			};
		},

		methods: {
			backpage() {
				uni.navigateBack({
					delta: 1
				})
			}
		},
	};
</script>

<style>
	/************************************************************
	** 请将全局样式拷贝到项目的全局 CSS 文件或者当前页面的顶部 **
	** 否则页面将无法正常显示                                  **
	************************************************************/

	html {
		font-size: 16px;
	}

	body {
		margin: 0;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
			'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	view,
	image,
	text {
		box-sizing: border-box;
		flex-shrink: 0;
	}

	#app {
		width: 100vw;
		height: 100vh;
	}

	.flex-row {
		display: flex;
		flex-direction: row;
	}
	.btn-box {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 30rpx;
	}

	.btn-lf {
		width: 330rpx;
		height: 88rpx;
		background: #19C865;
		border-radius: 44rpx;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.btnlf-p {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
	}

	.btn-rg {
		width: 330rpx;
		height: 88rpx;
		background: #FFFFFF;
		border: 1px solid #19C865;
		border-radius: 44rpx;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.btnrg-p {

		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #222222;
	}

	.manage {
		width: 118rpx;
		height: 28rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
	}

	.box {
		width: 690rpx;
		height: 680rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-top: 40rpx;
		/* display: flex;
		justify-content: space-between;
		align-items: center; */
	}

	.item {
		width: 690rpx;
		height: 200rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		margin-top: 20rpx;

	}

	.item-lf {
		width: 315rpx;
		height: 200rpx;
		background-color: #19c865;
		border-radius: 20px;
	}

	.item-rg {
		width: 315rpx;
		height: 200rpx;
		background-color: #19c865;
		border-radius: 20px;
	}

	.flex-col {
		display: flex;
		flex-direction: column;
	}

	.justify-start {
		justify-content: flex-start;
	}

	.justify-end {
		justify-content: flex-end;
	}

	.justify-center {
		justify-content: center;
	}

	.justify-between {
		justify-content: space-between;
	}

	.justify-around {
		justify-content: space-around;
	}

	.justify-evenly {
		justify-content: space-evenly;
	}

	.items-start {
		align-items: flex-start;
	}

	.items-end {
		align-items: flex-end;
	}

	.items-center {
		align-items: center;
	}

	.items-baseline {
		align-items: baseline;
	}

	.items-stretch {
		align-items: stretch;
	}

	.self-start {
		align-self: flex-start;
	}

	.self-end {
		align-self: flex-end;
	}

	.self-center {
		align-self: center;
	}

	.self-baseline {
		align-self: baseline;
	}

	.self-stretch {
		align-self: stretch;
	}

	.flex-1 {
		flex: 1 1 0%;
	}

	.flex-auto {
		flex: 1 1 auto;
	}

	.grow {
		flex-grow: 1;
	}

	.grow-0 {
		flex-grow: 0;
	}

	.shrink {
		flex-shrink: 1;
	}

	.shrink-0 {
		flex-shrink: 0;
	}

	.relative {
		position: relative;
	}

	.page {
		padding-bottom: 847rpx;
		background-color: #f3f3f5;
		height: 100%;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.section {
		padding: 104rpx 23rpx 291rpx;
		background-image: linear-gradient(0deg, #f3f3f5 0%, #19c865 61%, #19c865 100%);
	}

	.space-y-60>view:not(:first-child),
	.space-y-60>text:not(:first-child),
	.space-y-60>image:not(:first-child) {
		margin-top: 60rpx;
	}

	.image {
		width: 20rpx;
		height: 34rpx;
	}

	.pos {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.text {
		color: #ffffff;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 34rpx;
	}

	.group {
		padding: 0 7rpx;
	}

	.group_2 {
		padding-bottom: 39rpx;
	}

	.text_2 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 31rpx;
	}

	.space-x-7>view:not(:first-child),
	.space-x-7>text:not(:first-child),
	.space-x-7>image:not(:first-child) {
		margin-left: 7rpx;
	}

	.text_3 {
		color: #ffffff;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 23rpx;
	}

	.image_2 {
		width: 24rpx;
		height: 22rpx;
	}

	.section_2 {
		padding: 22rpx 27rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.font_1 {
		font-size: 30rpx;
		font-family: PingFang SC;
		line-height: 29rpx;
		font-weight: 700;
		color: #222222;
	}

	.text_4 {
		margin-left: 3rpx;
	}

	.font_2 {
		font-size: 26rpx;
		font-family: PingFang SC;
		line-height: 25rpx;
		font-weight: 500;
		color: #6b6b6b;
	}

	.text_5 {
		color: #999999;
		line-height: 27rpx;
	}

	.image_3 {
		margin-right: 3rpx;
		width: 120rpx;
		height: 120rpx;
	}

	.section_3 {
		margin: -272rpx 30rpx 0;
		padding: 40rpx 26rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.space-y-29>view:not(:first-child),
	.space-y-29>text:not(:first-child),
	.space-y-29>image:not(:first-child) {
		margin-top: 29rpx;
	}

	.text_6 {
		margin-left: 4rpx;
	}

	.group_3 {
		line-height: 25rpx;
	}

	.font_3 {
		font-size: 26rpx;
		font-family: PingFang SC;
		line-height: 25rpx;
		font-weight: 500;
		color: #222222;
	}

	.group_4 {
		line-height: 25rpx;
	}

	.font_4 {
		font-size: 26rpx;
		font-family: PingFang SC;
		line-height: 21rpx;
		font-weight: 500;
		color: #222222;
	}

	.group_5 {
		line-height: 25rpx;
	}

	.group_6 {
		line-height: 25rpx;
	}
</style>
